<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="zh-tw">
<head>
<meta charset="UTF-8">
<title>課程清單</title>
<!-- favicon -->
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="Bookmark" href="images/favicon.ico" type="image/x-icon"/>
<!-- reset.css -->
<link rel="stylesheet" href="css/reset.css" media="screen">
<!-- Skeleton grid system -->
<link rel="stylesheet" href="css/skeleton.css" media="screen">
<!-- css -->
<link rel="stylesheet" href="css/style.css" media="screen">
<!-- rwdmenu -->
<link type="text/css" rel="stylesheet" href="css/jquery.mmenu.css" />
<!-- Layout and Media queries-->
<link rel="stylesheet" href="css/layout.css" media="screen">
<!-- font-awesome.css -->
<link rel="stylesheet" href="css/font-awesome.min.css" media="screen">

<!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

<!-- Mobile Specific Meta -->
<meta name="viewport"
	content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
</head>
<body>

	<div id="page">
		<div class="header FixedTop">
			<a href="#menu" class="headericon"></a>
			<img src="images/logo.png" alt="proactive Logo">
		</div><!-- header -->
		<div class="content">
			<div class="list-screen clearfix">
				<div class="navfull">
					<div class="container">
						<div class="grid_12">
							<div class="logo"><a href="index">Proactive</a></div>
							<ul class="topnav">
							<c:forEach items="${menuList}" var="menu">
								<li>
									<a href="${menu.url}" class="${menu.classString1}">
										${menu.icon}
										${menu.name}
									</a>
								</li>
							</c:forEach>	
							</ul>
							<ul class="login">
								<li>
									<a href="aboutme?id=${loginMember.memberNO}" class="loginImg">
										<img src="${loginMember.photoPath}">
									</a>
									<ul class="loginDropdown hide">
										<li><a href="aboutme?id=${loginMember.memberNO}">關於我</a></li>
										<li><a href="memberCourse?id=${loginMember.memberNO}">我創作</a></li>		
										<li><a href="collectCourse?id=${loginMember.memberNO}">我收藏</a></li>
										<li><a href="memberCard?id=${loginMember.memberNO}">耶誕卡片</a></li>										
										<li><a href="logout">登出</a></li>
									</ul>
								</li>							
							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="classify clearfix">
				<div class="container">
					<div class="grid_12">
						<ul class="list-screen-condition">
							<li class="screen-condition">
								<a class="cond-down" href="javascript:;">
								<span class="cond-value">${category.typeName}</span>
								<i></i>
								</a>
								<ul>
									<c:forEach  var="i" begin="0" end="${fn:length(category.typeUrl)-1}">
									<li class="list-item">
										<a class="${category.typeClass[i]}" href="${category.typeUrl[i]}">
											${category.name[i]}
										</a>
									</li>
									</c:forEach>
									
								</ul>
							</li>
							<li class="screen-condition">
								<a class="cond-down" href="javascript:;">
								<span class="cond-value">${category.name1}</span>
								<i></i>
								</a>
								<ul>
									<c:forEach items="${category1}" var="category1">
									<li class="list-item">
										<a class="${category1.classString}" href="${category1.url}">
											${category1.name}
										</a>
									</li>
									</c:forEach>
								</ul>
							</li>
							<li class="screen-condition">
								<a class="cond-down" href="javascript:;">
								<span class="cond-value">${category.name2}</span>
								<i></i>
								</a>
							<ul>
								<c:forEach items="${category2}" var="category2">
								<li class="list-item">
									<a class="${category2.classString}" href="${category2.url}">
										${category2.name}
									</a>
								</li>
								</c:forEach>
							</ul>
							</li>
						</ul>
						<a href="addCourseCont" class="addTopButton">上傳課程</a>
					</div>
				</div>
			</div><!-- list-screen -->

			<div class="courseList">
				<ul class="container">
					<c:forEach items="${courseList}" var="course">
						<li class="grid_3">
							<div class="courseBox">
								<a href="showCourse?id=${course.id}" class="courseBoxImg">
									<img src="https://s3-ap-northeast-1.amazonaws.com/proactive/${course.imagePath}">
								</a> 
								<a href="showCourse?id=${course.id}" title="${course.title}" class="courseBoxTitle">
									${course.title}
								</a>
								<ul class="tools clearfix">
									<li>
										<img src="images/view.png" class="view">
										<span>${course.viewCount}</span>
									</li>
									<li>
										<img src="images/cmnt.png" class="cmnt"> 
										<span>${course.commentCount}</span>
									</li>
									<li>
										<img src="images/like.png" class="like"> 
										<span>${course.favoriteCount}</span>
									</li>
									<c:if test="${course.downloadUrl != '' || course.fileUrl != ''}">
									<li class="attach">
										<a href="${course.isFile==1?course.downloadUrl:course.fileUrl}" target="_blank" class="pic_a"> 
											<img src="images/attach.png" class="attach">
											<img src="images/attach2.png" class="attach2">
										</a>
									</li>	
									</c:if>
								</ul>
							</div>
						</li>
					</c:forEach>
					
				</ul>
			</div><!-- courseList -->
			<div class="page clearfix">
				<ul>
					<c:forEach items="${page.pagerList}" var="pager">
						<li class="${pager.indexClass}"><a href="${pager.url}">${pager.index}</a></li>
					</c:forEach>			
	            </ul>
	        </div><!-- page -->
	        <div><a href="#" id="gotop">回頂端</a></div>
	    </div><!-- content -->
		<!-- 左側meum滑出 -->
		<nav id="menu">
			<ul>		 
				<li class="logo"><a href="index">美編網</a></li>
				<c:forEach items="${menuList}" var="menu">				
				<li class="${menu.classString2}">
					<a class="${menu.classString1}" href="${menu.url}">${menu.icon}${menu.name}</a>
				</li>
				</c:forEach>
 				<li class="menumember">hi, ${loginMember.name}</li>
				<li class="menumember"><a href="aboutme?id=${loginMember.memberNO}"><img src="images/aboutme.png">關於我</a></li>
				<li class="menumember"><a href="memberCourse?id=${loginMember.memberNO}"><img src="images/mycreation.png">我創作</a></li>
                <li class="menumember"><a href="collectCourse?id=${loginMember.memberNO}"><img src="images/mystar.png">我收藏</a></li>
				<li class="menumember"><a href="logout">登出</a></li>
			</ul>
		</nav>
	</div>	
	
	<!-- import jquery -->
	<script
		src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>



	<!-- some jquery method we use -->
	<script src="js/hoverjquery.js"></script>
	<script src="js/listscreen.js"></script>	
	<script src="js/ourjquery.js"></script>	

	<!-- rwdmenu -->
	<script type="text/javascript" src="js/jquery.mmenu.min.all.js"></script>
	<script type="text/javascript">
		$(function() {
			$('nav#menu').mmenu();
		});
	</script>

</body>
</html>